<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多功能电子宠物助理TIME_KEY</title>
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #4ecdc4;
            --accent-color: #ff6b6b;
            --background-color: #f8f9fa;
            --card-bg: #ffffff;
            --text-color: #333;
            --border-radius: 12px;
            --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background: var(--background-color);
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
            overflow-x: hidden;
        }
        
        h1 {
            font-size: clamp(2rem, 5vw, 2.5rem);
            color: var(--primary-color);
            margin-bottom: 10px;
            text-align: center;
            border-bottom: 3px solid var(--secondary-color);
            padding-bottom: 15px;
        }
        
        h2 {
            font-size: clamp(1.5rem, 4vw, 1.8rem);
            color: var(--primary-color);
            margin: 30px 0 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eaeaea;
        }
        
        h3 {
            font-size: clamp(1.3rem, 3.5vw, 1.5rem);
            color: var(--primary-color);
            margin: 25px 0 15px;
        }
        
        h4 {
            font-size: clamp(1.1rem, 3vw, 1.3rem);
            color: var(--primary-color);
            margin: 20px 0 10px;
        }
        
        p {
            margin-bottom: 15px;
        }
        
        ul {
            margin: 10px 0 20px 20px;
        }
        
        li {
            margin-bottom: 8px;
        }
        
        strong {
            color: var(--primary-color);
        }
        
        mark {
            background-color: #fff566;
            padding: 2px 6px;
            border-radius: 4px;
        }
        
        /* 彩虹彩蛋卡片样式 */
        .rainbow-egg {
            position: relative;
            overflow: hidden;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            transition: var(--transition);
            margin: 20px 0;
        }
        
        .rainbow-egg:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        
        .rainbow-bg {
            background: linear-gradient(135deg, #ff6b6b, #ffa500, #ffff00, #4ecdc4, #667eea, #764ba2);
            border-radius: var(--border-radius);
            overflow: hidden;
        }
        
        .egg-summary {
            padding: 20px;
            color: white;
            font-size: clamp(1.2rem, 3vw, 1.5rem);
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
            transition: var(--transition);
            position: relative;
            z-index: 2;
            user-select: none;
        }
        
        .egg-summary:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .egg-content {
            padding: 0 20px;
            color: white;
            background: rgba(0, 0, 0, 0.2);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease, padding 0.3s ease;
        }
        
        .egg-content.open {
            max-height: 1000px;
            padding: 20px;
        }
        
        .egg-card {
            background: rgba(255, 255, 255, 0.15);
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            backdrop-filter: blur(5px);
            border-left: 4px solid transparent;
            transition: var(--transition);
        }
        
        .egg-card:hover {
            transform: translateX(3px);
            background: rgba(255, 255, 255, 0.2);
        }
        
        .egg-card:nth-child(1) {
            border-left-color: #ff6b6b;
        }
        
        .egg-card:nth-child(2) {
            border-left-color: #4ecdc4;
        }
        
        .egg-card:nth-child(3) {
            border-left-color: #ffa500;
        }
        
        .egg-card:nth-child(4) {
            border-left-color: #667eea;
        }
        
        .egg-card h4 {
            margin: 0 0 10px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .egg-card p {
            margin: 0;
            line-height: 1.5;
            font-size: 14px;
        }
        
        .egg-highlight {
            text-align: center;
            background: rgba(255, 255, 255, 0.2);
            padding: 15px;
            border-radius: 8px;
            margin-top: 10px;
            backdrop-filter: blur(5px);
            font-weight: bold;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        /* 吐槽文字样式 */
        .egg-complaint {
            text-align: center;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
            margin-top: 10px;
            padding: 5px;
            font-style: italic;
        }
        
        /* 水波纹效果 */
        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 165, 0, 0.3);
            transform: scale(0);
            animation: ripple 0.6s linear;
            pointer-events: none;
            z-index: 1;
        }
        
        @keyframes ripple {
            to {
                transform: scale(2.5);
                opacity: 0;
            }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .egg-summary {
                padding: 18px;
            }
            
            .egg-content {
                padding: 0 15px;
            }
            
            .egg-content.open {
                padding: 15px;
            }
        }
        
        /* 自定义样式 */
        .status-box {
            background: var(--background-color);
            padding: 15px;
            border-left: 4px solid var(--secondary-color);
            margin: 10px 0;
            border-radius: 8px;
        }
        
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 10px;
            margin: 20px 0;
        }
        
        .feature-item {
            background: var(--card-bg);
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: var(--transition);
        }
        
        .feature-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .highlight-box {
            background: linear-gradient(135deg, #f0f9ff, #e6f7ff);
            padding: 20px;
            border-radius: var(--border-radius);
            border-left: 6px solid #1890ff;
            margin: 15px 0;
        }
        
        .policy-box {
            background: #f6ffed;
            border: 2px solid #b7eb8f;
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
        }
        
        .resource-box {
            background: linear-gradient(135deg, #f0f6ff, #e6eeff);
            padding: 20px;
            border-radius: var(--border-radius);
            border-left: 6px solid #722ed1;
            margin: 15px 0;
        }
        
        .system-box {
            background: linear-gradient(135deg, #fff7e6, #fff2e8);
            padding: 20px;
            border-radius: var(--border-radius);
            border-left: 6px solid #fa8c16;
            margin: 15px 0;
        }
        
        .hardware-box {
            background: linear-gradient(135deg, #f6ffed, #f0ffe6);
            padding: 25px;
            border-radius: var(--border-radius);
            border: 2px solid #b7eb8f;
            margin: 20px 0;
        }
        
        .hardware-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 15px;
        }
        
        .scenario-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 25px 0;
        }
        
        .scenario-item {
            padding: 20px;
            border-radius: var(--border-radius);
            border-left: 6px solid;
            transition: var(--transition);
        }
        
        .scenario-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .cost-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        
        .cost-item {
            text-align: center;
            transition: var(--transition);
        }
        
        .cost-item:hover {
            transform: scale(1.03);
        }
        
        .cost-img {
            width: 100%;
            border-radius: 8px;
            border: 2px solid #e8e8e8;
            transition: var(--transition);
        }
        
        .cost-img:hover {
            border-color: var(--secondary-color);
        }
        
        .final-box {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 30px;
            border-radius: var(--border-radius);
            text-align: center;
            margin: 30px 0;
        }
        
        .final-box h3 {
            color: white;
            margin: 0 0 10px 0;
        }
        
        .final-box p {
            color: rgba(255,255,255,0.9);
            margin: 0;
            font-size: 16px;
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, #52c41a, #73d13d);
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
            border: none;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        /* 进度条样式 */
        .progress-container {
            margin: 20px 0;
            background: #e9ecef;
            border-radius: 10px;
            overflow: hidden;
            height: 20px;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #4ecdc4, #44a08d);
            border-radius: 10px;
            width: 75%;
            transition: width 1s ease-in-out;
            position: relative;
            overflow: hidden;
        }
        
        .progress-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-image: linear-gradient(
                -45deg,
                rgba(255, 255, 255, 0.2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0.2) 75%,
                transparent 75%,
                transparent
            );
            background-size: 50px 50px;
            animation: move 2s linear infinite;
        }
        
        @keyframes move {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 50px 50px;
            }
        }
        
        /* 加载动画 */
        .loader {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 浮动动画 */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        .floating {
            animation: float 3s ease-in-out infinite;
        }
    </style>
</head>
<body>
    <h1>【多功能电子宠物助理TIME_KEY】</h1>

    <h2>一、项目介绍</h2>
    <p>这是一款集<span style="color: #ff6b6b;">"情感化电子宠物"</span>与<span style="color: #4ecdc4;">"简单开源硬件平台"</span>于一体的多功能掌上设备。</p>
    <p>以<strong>国产STC8H8K64U单片机</strong>为核心，通过精妙系统设计，在<mark>单套物料成本仅约17元</mark>的极限条件下，打造功能完整、体验流畅的开放式创造平台。</p>

    <div class="status-box">
        <strong>🔄 开发状态：</strong>
        <div class="progress-container">
            <div class="progress-bar"></div>
        </div>
        <ul>
            <li>目前正在设计 <span style="color: #ffa502;">敬请期待！</span></li>
            <li><span style="color: #2ed573;">(部分功能已验证！)</span></li>
        </ul>
    </div>

    <div class="feature-grid">
        <div class="feature-item">
            <strong>🎯 桌面萌宠</strong><br>
            <small style="color: #666;">工作学习陪伴</small>
        </div>
        <div class="feature-item">
            <strong>⚡ 技术玩具</strong><br>
            <small style="color: #666;">激发创造力</small>
        </div>
        <div class="feature-item">
            <strong>📚 学习工具</strong><br>
            <small style="color: #666;">嵌入式入门</small>
        </div>
    </div>

    <h3>二、核心创新亮点</h3>
    
    <ul>
        <li>💰 极致成本与完整功能的平衡</li>
    </ul>
    
    <div class="highlight-box">
        <p><strong>革命性成本控制</strong>：通过精准的国产芯片选型、优化的电源管理方案（内置<span style="background: #fff566; padding: 4px 8px; border-radius: 6px; font-weight: bold;">2.3元充放电模块</span>）与免费PCB打样政策，实现低成本与高性能的完美结合</p>

        <div class="policy-box">
            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                <strong style="color: #52c41a;">🎫 PCB免费打样政策</strong>
            </div>
            <p style="margin: 0 0 10px 0; color: #666; font-size: 14px;">嘉立创每月提供<strong>2张免费打样券</strong>，这是实现24元极限成本的关键！</p>
            <a href="https://www.jlc.com/newOrder/#/collectCoupons?spm=JLC.MEMBER" target="_blank" class="btn">📄 立即领取PCB免费券 →</a>
        </div>

        <small style="color: #8c8c8c;">✨ STC单片机产品研发周期快，迭代效率极高（好吧，其实是研发成本低，好学）</small>

        <p><strong>一体化结构设计</strong>：3D打印外壳集成电池仓，显著提升产品完成度与用户体验</p>

        <div class="policy-box">
            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                <strong style="color: #52c41a;">🎯 3D打印免费政策</strong>
            </div>
            <p style="margin: 0 0 10px 0; color: #666; font-size: 14px;">充分利用免费政策，进一步降低整体成本！</p>
            <div style="color: #666; font-size: 14px; margin-bottom: 12px;">
                • 首张免费券：新用户无条件领取<br>
                • 持续免费：次月起转发即可续享<br>
                • 限领规则：每手机号仅限一次
            </div>
            <a href="https://www.jlc-3dp.cn/freePrint" target="_blank" class="btn">🎁 立即领取3D打印券 →</a>
        </div>
    </div>

    <ul>
        <li>🔄 智能资源管理架构</li>
    </ul>
    
    <div class="resource-box">
        <div style="background: white; padding: 15px; border-radius: 8px; border: 2px solid #d6e4ff; margin-bottom: 15px;">
            <strong>^0^</strong><br>
            <small style="color: #666;">在20引脚限制下实现外设功能的动态切换与隔离，兼顾易用性与扩展性</small>
        </div>

        <ul>
            <li><strong>模块化软件架构</strong>：采用分层设计，支持<span style="color: #eb2f96; font-weight: 600;">层级式菜单导航</span></li>
            <li><strong>积木式编程体验</strong>：通过<span style="color: #eb2f96; font-weight: 600;">"函数积木块"</span>的组合，实现有限硬件资源下的无限功能扩展</li>
        </ul>
    </div>

    <ul>
        <li>🛠️ 系统设计</li>
    </ul>
    
    <div class="system-box">
        <div style="background: white; padding: 15px; border-radius: 8px; border: 2px solid #ffe7ba; margin-bottom: 15px;">
            <strong>完整硬件生态集成</strong><br>
            <small style="color: #666;">一体化整合OLED显示、蓝牙通信（AT指令）、WS2812B控制接口、扩展外设接口，提供开箱即用的开发环境</small>
        </div>

        <div style="background: #fff7e6; padding: 15px; border-radius: 8px; border: 2px solid #ffd591;">
            <strong>📚 开源生态建设：</strong>
            <ul style="color: #666;">
                <li>完整的开源代码库与标准化硬件接口</li>
                <li>助力用户从入门到精通的平滑进阶路径</li>
                <li>支持复杂应用开发的快速原型验证</li>
            </ul>
        </div>
    </div>

    <!-- 灵感彩虹彩蛋卡片 -->
    <div class="rainbow-egg floating">
        <div class="rainbow-bg">
            <div class="egg-summary" id="egg-summary">
                <span class="loader"></span>🎮 跨平台虚实互动系统
            </div>
            <div class="egg-content" id="egg-content">
                <div class="egg-card">
                    <p>可以使用Godot游戏引擎编写一个2D平面游戏，再有一个USB转串口模块，让它和烧入单片机的USB转TTL模块连接，这样就可以在电脑（win和linux）上使用串口小助手与电子宠物通信啦。</p>
                </div>

                <div class="egg-card">
                    <h4 style="color: #4ecdc4;">🔄 状态关联机制</h4>
                    <p>在电子宠物上选择主模式，再连接电脑上的USB转串口模块来获取电子宠物的状态信息/串口1消息，游戏中的伙伴战斗力与游戏中的宠物伙伴状态关联。</p>
                </div>

                <div class="egg-card">
                    <h4 style="color: #ff6b6b;">💬 双向通信功能</h4>
                    <p>游戏中还会加入接收、发送单片机的消息的功能，不过由于与串口2也被引出了，所以可以直接使用串口2连接USB转TTL模块，直接与游戏通信。边打游戏边接收连接着单片机的设备的状态。</p>
                </div>

                <div class="egg-card">
                    <h4 style="color: #ffd700;">🚀 龙芯平台优势</h4>
                    <p>另外Godot游戏引擎是跨平台的，如果我有龙芯电脑的话就可以开发基于loongArch架构(自主可控)的原生游戏（还是和电子宠物有关的），并且龙芯电脑主板引出了串口的插针，好家伙，连USB转TTL模块都省去了.....</p>
                </div>

                <div class="egg-highlight">
                    <p>从掌心到屏幕，创造虚实交融的互动新体验！</p>
                </div>
                
                <!-- 添加的吐槽文字 -->
                <div class="egg-complaint">
                    代码好难写.....
                </div>
            </div>
        </div>
    </div>

    <h3>三、硬件扩展性</h3>

    <div class="hardware-box">
        <h3 style="margin-top: 0; color: #389e0d;">🔌 丰富的扩展接口</h3>
        <div class="hardware-grid">
            <div>
                <h4 style="color: #389e0d; margin-bottom: 10px;">🔧 基础接口</h4>
                <ul style="color: #666; margin: 0;">
                    <li>12个GPIO</li>
                    <li>5个10位ADC</li>
                    <li>I2C总线</li>
                    <li>CMP比较器</li>
                </ul>
            </div>
            <div>
                <h4 style="color: #389e0d; margin-bottom: 10px;">⚡ 高级功能</h4>
                <ul style="color: #666; margin: 0;">
                    <li>3组高级PWM带死区互补</li>
                    <li>2组串口</li>
                    <li>1组SPI</li>
                </ul>
            </div>
            <div>
                <h4 style="color: #389e0d; margin-bottom: 10px;">🔍 支持模块</h4>
                <ul style="color: #666; margin: 0;">
                    <li>温湿度传感器</li>
                    <li>光线传感器</li>
                    <li>陀螺仪模块</li>
                    <li>语音识别模块</li>
                    <li>舵机控制</li>
                </ul>
            </div>
        </div>
    </div>

    <h3>四、应用场景</h3>

    <div class="scenario-grid">
        <div class="scenario-item" style="background: linear-gradient(135deg, #fff2e8, #ffefe6); border-left-color: #fa541c;">
            <h4 style="color: #fa541c; margin-top: 0;">🏠 生活陪伴</h4>
            <p style="color: #666; margin: 0;">黑色主体+由屏幕颜色决定的边框颜色小火苗"TIME"，支持简单互动的情感化电子宠物</p>
        </div>

        <div class="scenario-item" style="background: linear-gradient(135deg, #e6fffb, #e6fffb); border-left-color: #13c2c2;">
            <h4 style="color: #13c2c2; margin-top: 0;">🔧 硬件调试工具</h4>
            <p style="color: #666; margin: 0 0 10px 0;">扩展：蓝牙透传串口1/自己的状况消息，手机控制IO口，支持多种传感器扩展</p>
            <small style="color: #8c8c8c;">软件设计完成后会开源~</small>
        </div>

        <div class="scenario-item" style="background: linear-gradient(135deg, #f0f6ff, #f0f6ff); border-left-color: #1890ff;">
            <h4 style="color: #1890ff; margin-top: 0;">📚 教育实践</h4>
            <ul style="color: #666; margin: 0; padding-left: 20px;">
                <li>嵌入式系统入门教学</li>
                <li>中小学创客教育载体</li>
            </ul>
        </div>

        <div class="scenario-item" style="background: linear-gradient(135deg, #f9f0ff, #f9f0ff); border-left-color: #722ed1;">
            <h4 style="color: #722ed1; margin-top: 0;">🔬 研发验证</h4>
            <ul style="color: #666; margin: 0; padding-left: 20px;">
                <li>低成本原型验证平台</li>
                <li>开源51生态孵化器</li>
            </ul>
        </div>
    </div>

    <h3>五、成本展示</h3>
    <div class="cost-grid">
        <div class="cost-item">
            <img src="https://image.lceda.cn/oshwhub/pullImage/d9e8727a43994bc695a7648444cf01e0.jpg" alt="元器件成本截图1" class="cost-img">
            <small style="color: #666;">主控芯片与DX-BT311主从一体蓝牙模组</small>
        </div>
        <div class="cost-item">
            <img src="https://image.lceda.cn/oshwhub/pullImage/a787c4807fd047818cfa6e33b3b87e0a.jpg" alt="元器件成本截图2" class="cost-img">
            <small style="color: #666;">电源管理组件</small>
        </div>
        <div class="cost-item">
            <img src="https://image.lceda.cn/oshwhub/pullImage/bb67b712d3fe4903b09c48176d545587.jpg" alt="元器件成本截图3" class="cost-img">
            <small style="color: #666;">电源管理和显示模块</small>
        </div>
        <div class="cost-item">
            <img src="https://image.lceda.cn/oshwhub/pullImage/7c70e24e19bb4881a81a32005499b18d.jpg" alt="元器件成本截图4" class="cost-img">
            <small style="color: #666;">交互与扩展插针元件</small>
        </div>
        <div class="cost-item">
            <img src="https://image.lceda.cn/oshwhub/pullImage/f883a34266d44af2843aeb22ec765e1c.jpg" alt="元器件成本截图5" class="cost-img">
            <small style="color: #666;">交互元件</small>
        </div>
        <div class="cost-item">
            <img src="https://image.lceda.cn/oshwhub/pullImage/fed1ee73a66b4763b1204d5974dcec54.jpg" alt="元器件成本截图6" class="cost-img">
            <small style="color: #666;">总成本汇总</small>
        </div>
    </div>
    
    <div style="background: linear-gradient(135deg, #f6ffed, #f0ffe6); padding: 15px; border-radius: 8px; border: 2px solid #b7eb8f; margin: 20px 0;">
        <p style="margin: 0; color: #389e0d; text-align: center;">
            <strong>💰 总物料成本：约24元</strong><br>
            <small>包含所有核心元器件，不含PCB、3d外壳打样费用（利用免费政策）</small>
        </p>
    </div>

    <div class="final-box">
        <h3>🚀 软件设计中......</h3>
        <p>期待与您一起探索硬件的无限可能！</p>
    </div>

    <script>
        // 彩虹彩蛋卡片交互逻辑
        document.addEventListener('DOMContentLoaded', function() {
            const eggSummary = document.getElementById('egg-summary');
            const eggContent = document.getElementById('egg-content');
            const loader = eggSummary.querySelector('.loader');
            
            // 初始状态
            let isOpen = false;
            
            // 点击事件处理
            eggSummary.addEventListener('click', function(e) {
                // 切换展开/收起状态
                isOpen = !isOpen;
                
                if (isOpen) {
                    // 展开内容
                    eggContent.classList.add('open');
                    loader.style.display = 'inline-block';
                } else {
                    // 收起内容
                    eggContent.classList.remove('open');
                    // 延迟隐藏加载动画
                    setTimeout(() => {
                        loader.style.display = 'none';
                    }, 300);
                }
            });
            
            // 键盘辅助功能
            eggSummary.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    eggSummary.click();
                }
            });
            
            // 水波纹效果
            eggSummary.addEventListener('mousemove', function(e) {
                // 限制水波纹创建频率
                if (this.dataset.rippleCooldown) return;
                
                this.dataset.rippleCooldown = true;
                setTimeout(() => {
                    delete this.dataset.rippleCooldown;
                }, 150);
                
                const ripple = document.createElement('span');
                const rect = this.getBoundingClientRect();
                const size = Math.min(rect.width, rect.height) * 0.3;
                const x = e.clientX - rect.left - size / 2;
                const y = e.clientY - rect.top - size / 2;
                
                ripple.style.width = ripple.style.height = size + 'px';
                ripple.style.left = x + 'px';
                ripple.style.top = y + 'px';
                ripple.classList.add('ripple');
                
                this.appendChild(ripple);
                
                setTimeout(() => {
                    ripple.remove();
                }, 600);
            });
            
            // 添加页面加载动画
            document.body.style.opacity = '0';
            document.body.style.transition = 'opacity 0.5s ease';
            
            setTimeout(() => {
                document.body.style.opacity = '1';
            }, 100);
            
            // 为所有卡片添加随机延迟的动画
            document.querySelectorAll('.feature-item, .scenario-item, .cost-item').forEach((item, index) => {
                item.style.opacity = '0';
                item.style.transform = 'translateY(20px)';
                item.style.transition = 'all 0.5s ease';
                
                setTimeout(() => {
                    item.style.opacity = '1';
                    item.style.transform = 'translateY(0)';
                }, 200 + index * 100);
            });
        });
    </script>
</body>
</html>